<template>
    <div class="courseIntroductionView">
        <div class="courseIntroduction">
            <div class="editoButtons" v-if="permission > 1">
                <div class="button" v-if="!isEditor" @click="openEditor">编辑课程介绍</div>
                <div class="button" v-if="isEditor" @click="closeEditor">取消</div>
                <div class="button" v-if="isEditor" @click="saveIntroduction">保存</div>
            </div>
            <div class="introductionHtml"  v-if="!isEditor && courseIntroduction?.length > 0" v-html="courseIntroduction"></div>
            <div class="introductionHtml"  v-else-if="!isEditor">
                <div class="empty">暂无课程介绍</div>
            </div>
            <div class="inputBox" v-if="isEditor">
                <EditorComponent class="editor" v-model="editorData" :documentModel="false" placeholder="请输入内容..." titlePlaceholder="请输入标题..." />
            </div>
        </div>
        <div class="courseIntroduction">
            <div class="title">课程老师</div>
            <div class="courseTeacher">
                <div class="teacherAvatar">
                    <img :src="courseTeacher?.teacher?.userId ? (baseUrl + '/users/overt/avatar?userId=' + courseTeacher?.teacher?.userId) : userAvatar()" alt="">
                </div>
                <div class="teacherInfo">
                    <span class="introduction teacherName">{{ courseTeacher?.teacher?.nickName }}</span>
                    <!-- <span class="introduction teacherEducation" v-if="courseTeacher?.teacher?.resume">{{ courseTeacher?.teacher?.resume }}</span> -->
                    <!-- <span class="introduction teacherUnit"  v-if="courseTeacher.teacherUnit">{{ courseTeacher.teacherUnit }}</span> -->
                    <span class="introduction teacherCourseCount">共发布过 <span class="num">{{ courseTeacher?.courseCount }}</span> 门课程</span>
                    <span class="introduction teacherCourseCount">共有 <span class="num">{{ courseTeacher?.studentCount }}</span> 位学生</span>
                    <div class="introductionContent">{{ courseTeacher?.teacher?.resume }}</div>
                    <div class="teacherPublishCourses" v-if="courseTeacher?.courseList?.length > 0">
                        <div class="teacherPublishCoursesTitle">老师发布的其他课程：</div>
                        <div class="teacherCourseList">
                            <div class="courseList" :style="{ width: (courseTeacher?.courseList?.length * 285) + 'px' }">
                                <CourseCard v-for="course in courseTeacher?.courseList" class="courseCard"
                                    :key="course" :courseId="course" :mode="'image'"  
                                    detailsUrl="/course/courseDetails" :boxWidth="270"
                                />
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="courseIntroduction" v-if="recommendCourse.length > 0">
            <div class="title">学习这门课的同学，还在学这些</div>
            <div class="recommendCourse">
                <CourseCard v-for="course in recommendCourse" class="courseCard"
                    :key="course" :courseId="course"
                    detailsUrl="/course/courseDetails" :boxWidth="270"
                />
            </div>
        </div>
    </div>
</template>

<script lang="ts">
import { ref, watch } from 'vue';
import { useRoute } from 'vue-router';
import CourseCard from '@/components/course/CourseCard.vue';
import { courseDetailsApi } from '@/api/course/Course';
import EditorComponent from '@/components/EditorComponent.vue';
import { userAvatar } from '@/types/Base64Image';
import { baseUrl } from '@/util/request';
import { CourseTeacher } from '@/types/Course';

export default {
    name: 'courseIntroductionView',
}
export interface UserInfo {
    userId: number;
    nickName: string;
}
</script>

<script setup lang="ts">
    const route = useRoute();  // 获取路由参数
    const courseId = ref<number | null>(null); // 初始化为 null
    // 获取路由参数
    const props = defineProps<{
        pCourseTeacher: CourseTeacher,
        pRecommendCourse: number[],
        pPermission: number
    }>();

    const permission = ref(0); // 权限
    const isEditor = ref(false); // 是否是编辑模式
    const editorData = ref('');

    // 课程介绍
    const courseIntroduction = ref('');
    // 课程老师
    const courseTeacher = ref<CourseTeacher | null>(null);
    // 推荐课程
    const recommendCourse = ref<number[]>([]);

    // 课程介绍编辑
    const openEditor = () => {
        editorData.value = courseIntroduction.value;
        isEditor.value = true;
    }

    // 关闭编辑
    const closeEditor = () => {
        isEditor.value = false;
    }

    // 保存
    const saveIntroduction = () => {
        courseDetailsApi.introduce.setText(courseId.value, editorData.value).then(() => {
            courseIntroduction.value = editorData.value;
            isEditor.value = false;
        });
    }
    
    // 参数转换函数（确保字符串转换为数字）
    const parseSafeInt = (value: string | string[] | undefined): number | undefined => {
        if (typeof value === 'string') {
            const num = parseInt(value, 10);
            return isNaN(num) ? undefined : num;
        }
        return undefined;
    };
    // 监听路由参数的变化
    watch(() => ({
        chourseIdParam: route.params.courseId,
        courseTeacherParam: props.pCourseTeacher,
        recommendCourseParam: props.pRecommendCourse,
        permissionParam: props.pPermission
    }), ({ chourseIdParam, courseTeacherParam, recommendCourseParam, permissionParam }) => {
        if(chourseIdParam)
        {
            courseId.value = parseSafeInt(chourseIdParam);
            // 获取课程介绍
            courseDetailsApi.introduce.getText(courseId.value).then(res => {
                courseIntroduction.value = res.data as unknown as string;
            });
        }

        if (courseTeacherParam) {
            // 深拷贝防止死循环
            const copiedTeacher = {
                ...courseTeacherParam,
                courseList: courseTeacherParam.courseList?.slice(0, 5) ?? []
            };

            courseTeacher.value = copiedTeacher;
        }

        if (recommendCourseParam) {
            // 获取推荐课程
            recommendCourse.value = recommendCourseParam;
        }

        if (permissionParam) {
            // 显示编辑按钮
            permission.value = permissionParam;
        }
    }, { immediate: true, deep: true } );
</script>

<style scoped>
.courseIntroductionView {
    width: 100%;
    box-sizing: border-box;
    position: relative;
    padding: 20px;
}

.courseIntroductionView .courseBriefIntroduction {
    width: 100%;
    position: relative;
}

.courseIntroductionView .courseIntroduction {
    width: 100%;
    position: relative;
}
/* 课程介绍内容 */
.courseIntroductionView .courseIntroduction .introductionHtml {
    width: 100%;
    position: relative;
}
.courseIntroductionView .courseIntroduction .introductionHtml .empty {
    font-size: 32px;
    font-weight: bold;
	font-family: "artisticFonts";
    display: flex;
    justify-content: center;
    align-items: center;
    color: rgba(180, 180, 180, 1);
}
/* 编辑按钮 */
.courseIntroductionView .courseIntroduction .editoButtons {
    width: 100%;
    position: relative;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    padding-bottom: 10px;
}
.courseIntroductionView .courseIntroduction .editoButtons .button{
    padding: 5px 10px;
    background-color: rgba(65, 185, 255, 1);
    color: rgba(255, 255, 255, 1);
    border-radius: 5px;
    font-size: 18px;
    margin-right: 10px;
    transition: all 0.3s;
}
.courseIntroductionView .courseIntroduction .editoButtons .button:hover {
    background-color: rgba(65, 185, 255, 0.8);
}
.courseIntroductionView .courseIntroduction .editoButtons .button:active {
    transition: all 0.1s;
    background-color: rgba(65, 185, 255, 0.9);
}
.courseIntroductionView .courseIntroduction .inputBox{
    width: 100%;
    height: 800px;
}
.courseIntroductionView .courseIntroduction .inputBox .editor{
    width: 100%;
    height: 100%;
}

.courseIntroductionView .courseIntroduction .title {
    width: 100%;
    padding: 25px 0px;
    font-weight: bold;
}

.courseIntroductionView .courseIntroduction .courseTeacher {
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    position: relative;
}

.courseIntroductionView .courseIntroduction .courseTeacher .teacherAvatar {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    overflow: hidden;
    display: inline-block;
    border: 2px solid rgba(65, 185, 255, 1);
}

.courseIntroductionView .courseIntroduction .courseTeacher .teacherAvatar img {
    width: 100%;
    height: 100%;
}

.courseIntroductionView .courseIntroduction .courseTeacher .teacherInfo {
    width: calc(100% - 75px);
}

.courseIntroductionView .courseIntroduction .courseTeacher .teacherInfo .introduction {
    display: inline-block;
    padding-right: 20px;
    color: rgba(100, 100, 100, 1);
}

.courseIntroductionView .courseIntroduction .courseTeacher .teacherInfo .introduction .num {
    color: rgb(218, 134, 24);
}

.courseIntroductionView .courseIntroduction .courseTeacher .teacherInfo .teacherName {
    font-size: 20px;
    font-weight: bold;
    color: rgba(0, 0, 0, 1);
}

.courseIntroductionView .courseIntroduction .courseTeacher .introductionContent {
    width: 100%;
}
.courseIntroductionView .courseIntroduction .courseTeacher .teacherPublishCourses {
    width: 100%;
}

.courseIntroductionView .courseIntroduction .courseTeacher .teacherPublishCourses .teacherPublishCoursesTitle {
    width: 100%;
    padding: 10px 0px;
    color: rgba(100, 100, 100, 1);
}

.courseIntroductionView .courseIntroduction .courseTeacher .teacherPublishCourses .teacherCourseList {
    width: 100%;
    padding-bottom: 10px;
    overflow: hidden;
    /* 打开滚动条 */
    overflow-x: auto;
    position: relative;
}

.courseIntroductionView .courseIntroduction .courseTeacher .teacherPublishCourses .teacherCourseList .courseList {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: flex-start;
    position: relative;
    gap: 10px; /* 项目之间的间距 */
}

.courseIntroductionView .courseIntroduction .courseTeacher .teacherPublishCourses .teacherCourseList .courseList .courseCard {
    display: inline-block;
}

.courseIntroductionView .courseIntroduction .recommendCourse {
    width: 100%;
    /* 瀑布流布局，每行显示5个 */
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(285px, 1fr));
    gap: 35px 0px; /* 项目之间的间距 */
    justify-items: center;
    position: relative;
}
</style>